<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Resizable Sidebar</title>
    <style>
      body {
        margin: 0;
        display: flex;
      }
      .sidebar {
        width: 250px;
        background-color: #f4f4f4;
        height: 100vh;
        position: relative;
      }
      .resizer {
        width: 5px;
        background-color: #aaa;
        cursor: ew-resize;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
      }
      .content {
        flex-grow: 1;
        background-color: #fff;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="sidebar">
      <div class="resizer" id="resizer"></div>
    </div>
    <div class="content">
      <p>Content area</p>
    </div>
    <script>
      const resizer = document.getElementById("resizer");
      const sidebar = resizer.parentElement;

      resizer.addEventListener("mousedown", (e) => {
        document.addEventListener("mousemove", resize);
        document.addEventListener("mouseup", stopResize);
      });

      function resize(e) {
        const newWidth = e.clientX - sidebar.getBoundingClientRect().left;
        sidebar.style.width = newWidth + "px";
      }

      function stopResize() {
        document.removeEventListener("mousemove", resize);
        document.removeEventListener("mouseup", stopResize);
      }
    </script>
  </body>
</html>
